<template>
  <div class="content">
    <template v-if="title==='肃州区'">
      <div class="list" v-for="item in list" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="title==='金塔县'">
      <div class="list" v-for="item in list1" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="title==='敦煌市'">
      <div class="list" v-for="item in list2" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="title==='玉门市'">
      <div class="list" v-for="item in list3" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="title==='瓜州县'">
      <div class="list" v-for="item in list4" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="title==='肃北县'">
      <div class="list" v-for="item in list5" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="title==='阿克塞县'">
      <div class="list" v-for="item in list6" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>

  </div>
</template>

<script>
export default {
  name: "MapCount1",
  props:{
    title:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      list:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序访问量',icon:'icon-caishouzhongliang',number:20905},
        {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:128},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:110},
        {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:9641},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:7453},
      ],
      list1:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序访问量',icon:'icon-caishouzhongliang',number:5226},
        {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:33},
        {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:2874},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:2417},
      ],
      list2:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序访问量',icon:'icon-caishouzhongliang',number:587},
        {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:26},
        {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:0},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:214},
      ],
      list3:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序关注量',icon:'icon-caishouzhongliang',number:1932},
        {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:29},
        {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:1350},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:86},
      ],
      list4:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序关注量',icon:'icon-caishouzhongliang',number:4287},
        {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:37},
        {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:1687},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:1105},
      ],
      list5:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序关注量',icon:'icon-caishouzhongliang',number:3128},
        {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:21},
        {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:841},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:217},
      ],
      list6:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序关注量',icon:'icon-caishouzhongliang',number:519},
        {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:7},
        {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:479},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:195},
      ],
    }
  },
  computed:{
    thousands(){
      return typeof this.number==='number'?this.number.toLocaleString():this.number;
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  width: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  .list{
    border: 1px solid #0c1865;
    background: #164088;
    margin-right: 30px;
    padding: 20px 40px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .count{
      color: #ffffff;
      font-size: 30px;
    }
    .name{
      color: #ffffff;
    }
  }
}
</style>
